<template>
    <n-layout position="absolute" style="height: 100vh; width: 100vw" has-sider>
        <n-layout-sider
            show-trigger="arrow-circle"
            bordered
            content-style="padding: 24px;"
            :show-collapsed-content="false"
            style="background-color: #ebedf2"
            :collapsed-width="20"
            :width="240"
        >
            <div
                style="
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding: 0 8px 0 12px;
                    border-radius: 8px;
                "
            >
                <n-icon size="30">
                    <Accessibility28Regular />
                </n-icon>
                <h1 style="font-size: 20px; padding: 0 12px">学生系统</h1>
            </div>
            <div style="padding: 12px 8px 12px 8px">
                <n-button type="primary" style="width: 100%; height: 48px">
                    <template #icon>
                        <n-icon>
                            <AddCircle28Regular />
                        </n-icon>
                    </template>
                    加入新班级
                </n-button>
            </div>
            <n-menu :options="menuOptions" ref="leftMenuRef" />
        </n-layout-sider>
        <n-layout>
            <n-layout-header bordered style="height: 64px">
                <div
                    style="
                        height: 100%;
                        widows: 100%;
                        display: flex;
                        align-items: center;
                    "
                >
                    <div style="flex-grow: 1"></div>
                    <h3 style="text-align: left">{{ this.UserName }}</h3>
                    <n-popover
                        width="200"
                        :overlap="false"
                        placement="bottom"
                        trigger="hover"
                    >
                        <template #trigger>
                            <n-avatar
                                style="margin: 24px"
                                round
                                :size="48"
                                src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                            />
                        </template>
                        <n-button
                            style="width: 100%"
                            quaternary
                            @click="logout"
                        >
                            从这里逃离
                        </n-button>
                    </n-popover>
                </div>
            </n-layout-header>
            <n-layout-content
                position="absolute"
                style="top: 64px"
                content-style="padding: 24px;"
            >
                <router-view />
            </n-layout-content>
        </n-layout>
    </n-layout>
</template>

<script setup>
import { ref, defineComponent, h } from "vue";

import { NIcon, useMessage } from "naive-ui";

import { useStore, mapState } from "vuex";
import { useRouter, useRoute } from "vue-router";

import web_axios from "../axios";

import Accessibility28Regular from "@vicons/fluent/Accessibility28Regular";
import AddCircle28Regular from "@vicons/fluent/AddCircle28Regular";
import { RouterLink } from "vue-router";
import {
    NAvatar,
    NButton,
    NLayout,
    NLayoutSider,
    NLayoutHeader,
    NLayoutContent,
    NPopover,
    NMenu,
} from "naive-ui";

const store = useStore();
const router = useRouter();
const route = useRoute();

const menuOptions = [
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        path: "/student/myclass",
                    },
                },
                { default: () => "我的班级" }
            ),
        key: "my-class",
        select: true,
    },
    {
        type: "group",
        label: "考试",
        key: "re",
        disabled: false,
        children: [
            {
                label: () =>
                    h(
                        RouterLink,
                        {
                            to: {
                                path: "/student/exam",
                            },
                        },
                        { default: () => "未完成" }
                    ),
                key: "re0",
            },
            {
                label: () =>
                    h(
                        RouterLink,
                        {
                            to: {
                                path: "/student/exam",
                            },
                        },
                        { default: () => "未批改" }
                    ),
                key: "re1",
            },
            {
                label: () =>
                    h(
                        RouterLink,
                        {
                            to: {
                                path: "/student/exam",
                            },
                        },
                        { default: () => "已批改" }
                    ),
                key: "re2",
            },
            {
                label: () =>
                    h(
                        RouterLink,
                        {
                            to: {
                                path: "/student/exam",
                            },
                        },
                        { default: () => "已错过" }
                    ),
                key: "re3",
            },
        ],
    },
];

function logout() {
    web_axios.post("/logout").then((value) => {
        if (value.data.code === 200 && value.data.msg === "操作成功") {
            store.state.UserName = "";
            router.push({
                name: "Login",
                query: {
                    redirect: "/student",
                },
            });
        }
    });
}
</script>

<script>
export default defineComponent({
    name: "Student",
    methods: {},
    created() {
        web_axios.get("/getMyUserInfo").then((value) => {
            if (value.data.code === 200 && value.data.msg === "操作成功") {
                this.$store.state.UserName = value.data.data.nickName;
            }
        });
    },
    computed: mapState(["UserName"]),
});
</script>

<style></style>
